<script setup>
import { computed, watchEffect } from 'vue'
import sixPwd from './sixPwd.vue'
import { Popup, NavBar, showLoadingToast, closeToast } from 'vant'
const props = defineProps({
  clear: {
    type: Boolean,
  },
  isShow: {
    type: Boolean,
  },
  pwdId: {
    type: String,
  },
  passGuard: {
    type: String,
  },
  onFinish: {
    type: Function,
    default: () => {},
  },
  closeModal: {
    type: Function,
    default: () => {},
  },
})
const emit = defineEmits(['update:isShow'])
const popupShow = computed({
  get: () => props.isShow,
  set: (val) => emit('update:isShow', val),
})
const onClickRight = () => {
  props.closeModal()
}
watchEffect(() => {
  if (props.isShow) {
    showLoadingToast({ duration: 0, forbidClick: true, message: '加载中' })
    setTimeout(() => {
      if (document.getElementById(props.pwdId)) {
        document.getElementById(props.pwdId).click()
        closeToast()
      }
    }, 400)
  } else if (window.PassGlobalSix && window.kb) {
    if (
      document.getElementById('testkbid') &&
      document.getElementById('testkbid').style.display === 'block'
    ) {
      window.kb.hide()
    }
    if (document.getElementById(props.pwdId)) {
      document.getElementById(props.pwdId).blur()
    }
  }
})
</script>
<template>
  <div>
    <Popup v-model:show="popupShow" position="bottom" z-index="99">
      <div id="Kjtfixed">
        <NavBar
          class="pwd-nav"
          title="输入交易密码"
          right-text="关闭"
          @click-right="onClickRight"
        />
        <sixPwd
          :clear="!popupShow || props.clear"
          :autoFocus="false"
          :pwdId="props.pwdId"
          type="six"
          :passGuard="props.passGuard"
          :onFinish="props.onFinish"
        />
        <!-- <div class="pwd-forget">
          <a :href="forgetLink">忘记密码</a>
        </div> -->
      </div>
    </Popup>
  </div>
</template>
<style scoped lang="scss">
.pwd-nav {
  border-radius: 0.2rem 0.2rem 0px 0px;
}
.pwd-forget {
  height: 0.44rem;
  display: flex;
  justify-content: flex-end;
  font-weight: 400;
  color: #4f7bff;
  line-height: 0.24rem;
  padding: 0.1rem 0.34rem;
  a {
    position: absolute;
    z-index: 99999;
    display: inline-block;
    font-weight: 400;
    color: #4f7bff;
  }
}
#Kjtfixed {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
</style>
